<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>买个锤子哟</title>
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {

    }

    #div {
        height: 800px;
        margin: 0 auto;
    }

    #div-top {
        /*background-color: #212F3D;*/
        background-image: linear-gradient(90deg, #222325, #3b3c3f, #222325);
        /*height: 5%;*/
        /*text-align: center;*/
    }

    #div-top li {
        display: inline-block;
        padding-left: 15px;
        padding-right: 15px;
    }

    #div-top ul {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 210px;
    }

    #div-top a {
        text-decoration: none;
        color: #D0D3D4;
        font-size: 12px;
    }

    #shopping a {
        color: #ECF0F1;
    }

    #div-nav {
        height: 10%;
        background-color: #FDFEFE;
    }

    #n-left {
        float: left;
        padding-left: 185px;
    }

    #n-left ul {
        padding-top: 29px;
    }

    #n-left ul li {
        display: inline-block;

    }

    #n-left a {
        text-decoration: none;
        color: #212F3D;
        padding-left: 17px;
        padding-right: 17px;
        font-size: 16px;
    }

    #n-right {
        float: right;
        padding-right: 210px;
    }

    #n-right input {
        outline: none;
        margin-top: 25px;
        height: 28px;
        width: 250px;
        border-radius: 15px;
        border: 1px solid #ECF0F1;
    }
    #banner{
        text-align: center;
    }
    #banner img {
        margin-top: 15px;
        border-radius: 8px;
    }
    #div-main{
        background-color: #EBEDEF;
    }
    #mani-1 {
        margin-top: 15px;
    text-align: center;
    }
    #mani-1 img{
       display: inline-block;
        width: 301.3341px;
    }
    #q1 img{
        border-radius: 8px 0px 0px 8px;
    }
    #q2 img{
        border-radius: 0px 8px 8px 0px;
    }
</style>
<body>
<div id="div">
    <!--        顶部-->
    <div id="div-top">
        <span style="float: left; padding-top: 10px;padding-left: 10px"><img src="img/1.png" alt=""></span>
        <span style="float: right;padding-top: 10px;padding-right: 14px"><img src="img/2.png" alt=""></span>
        <ul>
            <li id="shopping"><a href="">在线商城</a></li>
            <li><a href="">坚果R2</a></li>
            <li><a href="">Smartisan&nbsp;TNT&nbsp;go</a></li>
            <li><a href="">坚果TNT工作站</a></li>
            <li><a href="">Smartisan&nbsp;OS</a></li>
            <li><a href="">欢喜云</a></li>
            <li><a href="">应用</a></li>
            <li><a href="">论坛</a></li>
            <li><a href="">开发者支持</a></li>
            <li><a href="">荣誉与奖项</a></li>
            <li><a href="">加入我们</a></li>
            <li><a href="">下载&nbsp;APP</a></li>
        </ul>

    </div>
    <!--        导航栏-->
    <div id="div-nav">
        <div id="n-left">
            <ul>
                <li><strong><a href="">首页</a></strong></li>
                <li><a href="">坚果手机</a></li>
                <li><a href="">TNT</a></li>
                <li><a href="">官方自营</a></li>
                <li><a href="">服饰箱包</a></li>
                <li><a href="">大力教育</a></li>
                <li><a href="">服务</a></li>
            </ul>
        </div>
        <div id="n-right">
            <input type="text">
        </div>
    </div>
    <!--        主体-->
    <div id="div-main">
        <!--        banner图片-->
        <div id="banner">
            <img src="img/main.jpg" alt="">
        </div>
<!--        第一行-->
        <div id="mani-1">
            <sapn id="q1"><img src="img/01.jpg" alt=""></sapn>
            <img src="img/02.jpg" alt="">
            <img src="img/03.jpg" alt="">
            <span id="q2"><img src="img/04.jpg" alt=""></span>
        </div>
    </div>
    <!--        底部-->
    <div id="div-footer">

    </div>
</div>
</body>
</html>